<template>
  <view class="login-page">
    <view class="login-logo">
      <image src="/static/logo.png" class="logo" />
    </view>
    <view class="login-form">
      <text>用户: keyar</text>
      <input class="form-input" v-model="password" type="password" placeholder="密码" />
      <button class="form-btn" @click="login">登录</button>
      <button class="form-btn register" @click="register">注册</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { setStorageSync, navigateBack } from '@dcloudio/uni-app';

const password = ref("");

// 登录（模拟）
const login = () => {
  if (password.value !== "123456") return uni.showToast({ title: "密码错误", icon: "none" });
  // 存储用户信息
  setStorageSync('userInfo', {
    username: "keyar",
    avatar: "/static/avatar.png",
    followCount: 3,
    topicCount: 0
  });
  // 返回上一页
  navigateBack();
};

// 注册（模拟）
const register = () => {
  uni.showToast({ title: "注册功能待实现", icon: "none" });
};
</script>

<style scoped>
.login-page {
  padding: 20rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-logo {
  margin-bottom: 50rpx;
}
.logo {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.login-form {
  width: 80%;
  background: #fff;
  padding: 30rpx;
  border-radius: 8rpx;
  text-align: center;
}
.form-input {
  width: 100%;
  height: 60rpx;
  border: 1rpx solid #eee;
  border-radius: 4rpx;
  padding: 0 10rpx;
  margin: 20rpx 0;
}
.form-btn {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 4rpx;
  margin-bottom: 10rpx;
}
.register {
  background: #ff3333;
}
</style>